import React from 'react';
import { Layout, Button, Space, Tooltip, Avatar, Dropdown } from 'antd';
import {
  PlayCircleOutlined,
  CheckOutlined,
  FileTextOutlined,
  BarChartOutlined,
  RobotOutlined,
  UserOutlined,
  LogoutOutlined,
  SettingOutlined,
  TeamOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { favicon } from '../../assets/index';
import avatarImg from '../../assets/Avatar.png';
import ProblemList from './ProblemList';
import type { Problem } from '../../api/vo/problemDetail';

const { Header: AntHeader } = Layout;

interface ProblemDetailHeaderProps {
  showProblemPanel: boolean;
  showResultPanel: boolean;
  showAiPanel: boolean;
  runResultLoading: boolean;
  onToggleProblemPanel: () => void;
  onToggleResultPanel: () => void;
  onToggleAiPanel: () => void;
  onRunCode: () => void;
  onSubmitCode: () => void;
  onSelectProblem: (problem: Problem) => void;
}

const ProblemDetailHeader: React.FC<ProblemDetailHeaderProps> = ({
  showProblemPanel,
  showResultPanel,
  showAiPanel,
  runResultLoading,
  onToggleProblemPanel,
  onToggleResultPanel,
  onToggleAiPanel,
  onRunCode,
  onSubmitCode,
  onSelectProblem
}) => {
  const navigate = useNavigate();

  return (
    <AntHeader className="problem-detail-header">
      <div className="header-left">
        <Button type="text" onClick={() => navigate('/')} className="logo-btn">
          <img src={favicon} alt="Logo" style={{ width: '20px', height: '20px', marginRight: '8px' }} />
          SWUST OJ
        </Button>
        <ProblemList onSelectProblem={onSelectProblem} />
      </div>

      <div className="header-center">
        <Space size="middle">
          <Tooltip title="运行代码">
            <Button
              type="text"
              icon={<PlayCircleOutlined />}
              loading={runResultLoading}
              onClick={onRunCode}
              className="action-icon-btn run-btn"
              size="large"
            />
          </Tooltip>
          <Tooltip title="提交代码">
            <Button
              type="text"
              icon={<CheckOutlined />}
              onClick={onSubmitCode}
              className="action-icon-btn submit-btn"
              size="large"
            />
          </Tooltip>
        </Space>
      </div>

      <div className="header-right">
        <Space>
          <Tooltip title={showProblemPanel ? "隐藏题目面板" : "显示题目面板"}>
            <Button
              type="text"
              icon={<FileTextOutlined />}
              onClick={onToggleProblemPanel}
              className={`toggle-btn ${showProblemPanel ? 'active' : ''}`}
            />
          </Tooltip>
          <Tooltip title={showResultPanel ? "隐藏结果面板" : "显示结果面板"}>
            <Button
              type="text"
              icon={<BarChartOutlined />}
              onClick={onToggleResultPanel}
              className={`toggle-btn ${showResultPanel ? 'active' : ''}`}
            />
          </Tooltip>
          <Tooltip title={showAiPanel ? "隐藏AI面板" : "显示AI面板"}>
            <Button
              type="text"
              icon={<RobotOutlined />}
              onClick={onToggleAiPanel}
              className={`toggle-btn ${showAiPanel ? 'active' : ''}`}
            />
          </Tooltip>
          
          {/* 用户头像和下拉菜单 */}
          <Dropdown
            menu={{
              items: [
                {
                  key: 'profile',
                  label: '个人主页',
                  icon: <UserOutlined />,
                  onClick: () => {
                    console.log('跳转到个人主页');
                  }
                },
                {
                  key: 'class-management',
                  label: '班级管理',
                  icon: <TeamOutlined />,
                  onClick: () => {
                    console.log('跳转到班级管理');
                  }
                },
                {
                  key: 'system-management',
                  label: '系统管理',
                  icon: <SettingOutlined />,
                  onClick: () => {
                    console.log('跳转到系统管理');
                  }
                },
                {
                  type: 'divider'
                },
                {
                  key: 'logout',
                  label: '退出登录',
                  icon: <LogoutOutlined />,
                  onClick: () => {
                    console.log('退出登录');
                  }
                }
              ]
            }}
            trigger={['click']}
            placement="bottomRight"
          >
            <div style={{ 
              display: 'flex', 
              alignItems: 'center', 
              cursor: 'pointer', 
              padding: '0 8px',
              borderRadius: '20px',
              transition: 'background-color 0.2s'
            }}>
              <span style={{ color: '#333', fontSize: '14px', marginRight: '8px', fontWeight: '50px' }}>管理员</span>
              <div style={{
                position: 'relative'
              }}>
                <Avatar 
                  size={40} 
                  src={avatarImg}
                  style={{
                    border: '1px solid #1890ff',
                    boxShadow: '0 0 0 1px #1890ff'
                  }}
                />
              </div>
            </div>
          </Dropdown>
        </Space>
      </div>
    </AntHeader>
  );
};

export default ProblemDetailHeader;